<template>
  <div class="time-picker-fixed">
    <div class="time-picker">
      <div class="slider-container">
        <!-- 输入字段之前的按钮 -->
        <button class="play-pause-button" @click="togglePlayPause">
          {{ isPlaying ? "暂停" : "开始" }}
        </button>
      </div>
      <div class="date-picker">
        <input
          type="date"
          v-model="selectedDate"
          @input="updateTime"
          class="custom-date-input"
          :min="'2023-08-02'"
          :max="'2023-09-06'"
        />
      </div>
      <div class="time-selection">
  <select v-model="selectedHour">
    <option v-for="hour in 24" :key="hour" :value="hour - 1">
      {{ hour - 1 }}
    </option>
  </select>
  <span>:</span>
  <select v-model="selectedMinute">
    <option value="0">00</option>
  </select>
</div>

      <div class="time-slider">
        <input
          type="range"
          class="slider"
          min="0"
          max="1439"
          step="60"
          v-model="startMinutes"
          @input="updateStartTime"
          @change="updateSliderPosition"
          @mousedown="isDragging = true"
          @mouseup="isDragging = false"
        />

        <div class="slider-labels">
          <div
            v-for="minute in 240"
            :key="minute"
            class="slider-tick"
            :style="{ left: (minute * 100) / 240 + '%' }"
          ></div>
        </div>
        <!-- 显示当前选择的时间点 -->
      </div>
      <div class="selected-time">
        {{ selectedDate }} {{ formattedStartTime }}
      </div>
    </div>
  </div>
</template>
  
  <script>
let intervalId = null; // 添加定时器的标志

export default {
  data() {
    return {
      selectedDate: null,
      startMinutes: 0,
      isPlaying: false,
      selectedHour: 0,
      selectedMinute: 0,
    };
  },
  computed: {
    formattedStartTime() {
      if (!this.selectedDate) {
        return "";
      }
      const startHours = Math.floor(this.startMinutes / 60);
      const startMins = this.startMinutes % 60;
      return `${startHours}:${String(startMins).padStart(2, "0")}`;
    },
  },
  watch: {
    startMinutes: function (newMinutes) {
      this.selectedHour = Math.floor(newMinutes / 60);
      this.selectedMinute = newMinutes % 60;
    },
    selectedHour: function (newHour) {
      this.startMinutes = newHour * 60 + this.selectedMinute;
    },
    selectedMinute: function (newMinute) {
      this.startMinutes = this.selectedHour * 60 + newMinute;
    },
    selectedHour: "handleHourMinuteChange", // 监听selectedHour变化，触发handleHourMinuteChange方法
  selectedMinute: "handleHourMinuteChange", 
  },
  methods: {
    handleHourMinuteChange() {
    this.startMinutes = this.selectedHour * 60 + this.selectedMinute;
    this.updateTime(); // 更新时间
  },
    updateStartMinutes() {
      this.startMinutes = this.selectedHour * 60 + this.selectedMinute;
      this.updateTime(); // 更新时间
    },
    updateTime() {
      this.$emit("time-range-selected", {
        date: this.selectedDate,
        start: this.formattedStartTime,
      });
    },
    updateStartTime() {
      this.updateTime();
      // 只有在播放时才更新起始时间
      if (this.isPlaying) {
        this.playTime();
      }
    },
    togglePlayPause() {
      if (!this.selectedDate) {
        // 初始化 selectedDate，可以设置为当前日期或其他默认值
        // const today = new Date();
        // const year = today.getFullYear();
        // const month = today.getMonth() + 1;
        // const day = today.getDate();
        const year = 2023;
        const month = 8;
        const day = 2;
        this.selectedDate = `${year}-${month.toString().padStart(2, "0")}-${day
          .toString()
          .padStart(2, "0")}`;
      }

      if (this.isPlaying) {
        clearInterval(intervalId);
      } else {
        this.startMinutes = 0;
        // 设置开始时间为6:18
        // this.startMinutes = 6 * 60 + 18;

        // 使用 $nextTick 来确保 selectedDate 和 startMinutes 更新后再执行播放操作
        this.$nextTick(() => {
          intervalId = setInterval(this.playTime, 8000);
          this.playTime(); // 立即执行一次播放以避免 NaN:NaN
        });
      }
      this.isPlaying = !this.isPlaying;

      // 判断是否正在拖动滑块
      if (!this.isDragging) {
        // 如果不是拖动状态，根据鼠标拖动的位置来更新 startMinutes
        const sliderValue = (this.currentSliderPosition / 100) * 1439;
        this.startMinutes = Math.round(sliderValue / 6) * 6; // 步长为6
      }
    },

    playTime() {
      if (this.isPlaying) {
        if (this.startMinutes < 1434) {
          this.startMinutes += 60; // 步长为15，表示每次前进15分钟
        } else {
          this.startMinutes = 0;
        }
        this.updateTime();
        this.updateSliderPosition(); // 每次播放时更新滑块位置
      }
    },

    updateSliderPosition() {
      // 更新滑块位置，直接使用startMinutes作为百分比计算
      this.currentSliderPosition = (this.startMinutes * 100) / 1439; // 假设一天有1439分钟
    },
  },

  mounted() {
    // 初始化 selectedDate，可以设置为当前日期或其他默认值
    //  const today = new Date();
    //  const year = today.getFullYear();
    //  const month = today.getMonth() + 1;
    //  const day = today.getDate();
    const year = 2023;
    const month = 8;
    const day = 2;
    // 设置selectedDate为当前日期
    this.selectedDate = `${year}-${month.toString().padStart(2, "0")}-${day
      .toString()
      .padStart(2, "0")}`;

    this.startMinutes = 0; //
    // 设置startMinutes为6:18对应的分钟数
    // this.startMinutes = 6 * 60 + 18; // 6小时18分钟
    this.selectedHour = Math.floor(this.startMinutes / 60);
    this.selectedMinute = this.startMinutes % 60;
  },
  beforeUnmount() {
  if (intervalId) {
    clearInterval(intervalId)
    intervalId = null
  }
}
};
</script>
  
  <style scoped>
.time-picker-fixed {
  position: fixed;
  top: 90%; /* 垂直居中 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 居中偏移 */
  width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border-radius: 8px;
  background-color: transparent;
}
.time-picker {
  justify-content: center;
  width: 1200px;
  display: flex;
  flex-direction: row; /* 水平布局 */
  align-items: center;
  border: 3px solid #007bff;
  padding: 20px;
  border-radius: 8px;
  background-color: #f0f0f0;
}

.date-picker {
  margin-right: 20px; /* 添加右边距 */
}

.custom-date-input {
  border: 2px solid #007bff; /* 添加边框 */
  padding: 8px; /* 添加内边距 */
  border-radius: 4px; /* 添加圆角 */
  font-size: 16px; /* 调整字体大小 */
  color: #007bff; /* 文本颜色设置为蓝色 */
  background-color: transparent; /* 透明背景 */
  transition: border-color 0.3s, background-color 0.3s, color 0.3s; /* 添加过渡效果 */
}

.custom-date-input:hover {
  border-color: darkblue; /* 悬停时边框颜色变化 */
  background-color: rgba(0, 0, 255, 0.1); /* 悬停时背景颜色变化 */
  color: darkblue; /* 悬停时文本颜色变化 */
}

.slider-container {
  display: flex;
  align-items: center;
  width: 70px;
  margin-right: 20px; /* 添加右边距 */
}

.time-slider {
  width: 1000px;
}
.slider {
  width: 100%;
}

.slider-label {
  flex: 0 0 auto;
  margin-right: 10px;
}

.selected-time {
  font-size: 18px;
  font-weight: bold;
}

.play-pause-button {
  border: 2px solid #007bff;
  background-color: transparent;
  color: #007bff;
  padding: 8px;
  border-radius: 50%; /* 圆形按钮 */
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  margin-right: 10px; /* 修改右边距以减小按钮与时间选择字段之间的距离 */
}

.play-pause-button:hover {
  background-color: blue;
  color: white;
}

.time-selection {
  display: flex;
  align-items: center;
}

.time-selection select {
  padding: 8px;
  border: 2px solid #007bff;
  border-radius: 4px;
  font-size: 16px;
  color: #007bff;
  background-color: transparent;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
}

.time-selection select:hover {
  border-color: darkblue;
  background-color: rgba(0, 0, 255, 0.1);
  color: darkblue;
}

.time-selection span {
  margin: 0 8px; /* 添加间距 */
  font-size: 16px;
}
</style>
  